import React, { useEffect, useState } from "react";
import { ArrowUp, ArrowDown } from "../../source/svgs"
import style from "./style.less"
import { getAllTab } from "../../service/tab";
import { ITab } from "../../interface/tab";

interface IProps {
  changeTab: (tab: ITab | undefined) => void
}

export default function SideGuide(props: IProps) {
  const [pullDown, setPullDown] = useState<boolean>(false)
  const [tabs, setTabs] = useState<ITab[]>([])
  const [selectIndex, setSelectIndex] = useState<number>()

  useEffect(() => {
    getTabs()
  }, [])

  async function getTabs() {
    const data = await getAllTab()
    if (data.stat === 'ok') {
      setTabs(data.data)
    } else {
      alert("数据错误，请刷新页面")
    }
  }

  return (
    <React.Fragment>
      <div className={pullDown ? style.guideBar : style.openGuideBar} >
        {tabs.map((block: ITab, index: number) => {
          return (
            <div onClick={() => { if (selectIndex !== index) { setSelectIndex(index); props.changeTab(block) } else { setSelectIndex(undefined); props.changeTab(undefined) } }} className={index === selectIndex ? style.selectTab : style.block} key={index + block.value} >
              <span>{block.lable}</span>
            </div>
          )
        })}
      </div>
      <div className={style.arrow}>
        <img onClick={() => { setPullDown(!pullDown) }} className={style.arrowCircle} src={pullDown ? ArrowUp : ArrowDown} alt="" />
      </div>
    </React.Fragment>
  )
} 